@import '~themes/vars';

.paneContainer {
  display: flex;
  width: 90%;
  max-height: 60vh;
  flex-direction: row;
  margin: 10px 15px;
  justify-content: flex-start;

  .divider {
    min-height: 61vh;
  }

  .usTransfer {
    display: flex;
    min-height: 100%;
    flex: 2;
    margin: 0 10px;
    flex-direction: row;

    .card {

      display: flex;
      flex: 1;
      min-height: 100%;
      margin: 0 10px;
      flex-direction: column;
  
      .header {
        display: flex;
        height: 20px;
        flex-direction: row;
        justify-content: space-between;
  
        .title {
          font-size: 14px;
          color: #666666;
          flex: 2;
        }
  
        .btn {
          font-size: 13px;
        }
      }
  
      .content {
        margin-top: 10px;
  
        .infiniteContainer {
          border: 1px dashed #e8e8e8;
          border-radius: 4px;
          overflow: auto;
          padding: 8px 8px;
          height: 55vh;
        }
  
        .listItem {
          border-radius: 5px;
          background-color: #f9f9f9;
          cursor: pointer;
          border-bottom: 3px solid #ffffff;
  
          :global {
            .ant-list-item-meta {
              margin: 0 15px;
            }
          }
  
          &.selected {
            background-color: #00ccff;
            transition: @transition-ease-out;
          }
  
          &:hover {
            background-color: #99ccff;
            transition: @transition-ease-out;
          }
        }
      }
  
  
  
      .tree {
  
      }
  
    }

    .bottons {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      & button {
        margin-bottom: 10px;
      }

      & button:last-child {
        margin-bottom: 0px;
      }
    }
  }

  .card {

    display: flex;
    flex: 1;
    min-height: 100%;
    margin: 0 10px;
    flex-direction: column;

    .header {
      display: flex;
      height: 20px;
      flex-direction: row;
      justify-content: space-between;

      .title {
        font-size: 14px;
        color: #666666;
        flex: 2;
      }

      .btn {
        font-size: 13px;
      }
    }

    .content {
      margin-top: 10px;

      .infiniteContainer {
        border: 1px dashed #e8e8e8;
        border-radius: 4px;
        overflow: auto;
        padding: 8px 8px;
        height: 55vh;
      }

      .listItem {
        border-radius: 5px;
        background-color: #f9f9f9;
        cursor: pointer;
        border-bottom: 3px solid #ffffff;

        :global {
          .ant-list-item-meta {
            margin: 0 15px;
          }
        }

        &.selected {
          background-color: #00ccff;
          transition: @transition-ease-out;
        }

        &:hover {
          background-color: #99ccff;
          transition: @transition-ease-out;
        }
      }
    }



    .tree {

    }

  }
}


